<template>
  <div id="app">
<!-- 1.router-link的其他属性
         to属性：用于指定跳转的路径
         tag: tag可以指定<router-link>之后渲染成什么组件,默认是渲染成一个a标签
         replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
         active-class： 可以修改class名的默认值router-link-active为任意值-->

<!--    <router-link to="/Home" tag="button" replace active-class="active">首页</router-link>-->
<!--    <router-link to="/About" replace active-class="active">关于</router-link>-->
        <router-link to="/Home" tag="button" replace >首页</router-link>
        <router-link to="/About" replace >关于</router-link>
<!--    '/User/' 在v-bind里再用单引号，表示就是一个单纯的字符串-->
         <router-link :to="'/User/'+userId">用户</router-link>
         <router-link :to="{path:'/Profile',query:{name:'axu',age:30}}">档案</router-link>


<!-- 2.不用router-link，路由由代码跳转的方法-->
<!--    <button @click="homeClick">首页</button>-->
<!--    <button @click="aboutClick">关于</button>-->

<!--    3.不用router-link，用代码传递参数的方法-->
<!--    <button @click="userClick">用户</button>-->
<!--    <button @click="profileClick">档案</button>-->

<!-- router-view用于告诉要把组件渲染到什么位置。渲染出来的组件会替换router-view所在的位置，相当于占位-->
    <keep-alive exclude="profile,User">
<!--   router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，
       不会被重复创建和销毁
       keepalive属性：exclude='组件的name' 不包含这个组件
                        include='组件的name',包含这个组件-->
      <router-view></router-view>
    </keep-alive>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:'axu'
    }
  },
  methods: {
    homeClick() {
    // 通过代码方法修改路由 , Vue-router插件源码里往我们所有组件里都加入了一个$router属性
    //  push 相当于调用 pushState，如果你不想要页面可以返回，可以用 replace，相当于调用replaceState
    //   this.$router.push('/Home')
      this.$router.replace('/Home').catch(err=>{err})
    },
    aboutClick() {
      //这里的router相当于router实例对象  const router=new VueRouter()
      this.$router.push('/About').catch(err=>{err})
    },
    userClick(){
      this.$router.push('/User/'+this.userId)
    },
    profileClick(){
      this.$router.push({
        path:'/Profile',
        query:{
          name:'laoWen',
          age:29
        }
      }).catch(err=>{err})
    }
  }
}

</script>

<style>
/*当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class,
   就是你点哪个router-link，class：router-link-active就会出现在哪个router-link中，另一个里
   的这个class就会消失*/
  .active{
    color:red;
  }
</style>
